<template>
	<view class="module">
		<!-- 		<view class="title">
			修改密码
		</view> -->
		<view class="input">
			<u-form labelPosition="left" :model="info" ref="uForm" :rules="rules">
				<u-form-item borderBottom ref="item1">
					<u-input placeholder="请输入手机号" maxlength="11" v-model="info.phone" border="none"  
						type="number">
						<template slot="prefix">
							<view style="width: 80rpx;">
								<u-icon name="account" color="#8f8f94" size="20"></u-icon>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item labelWidth="80" borderBottom ref="item1">
					<u-input placeholder="请输入新密码" maxlength="11" v-model="info.newPassword" border="none"
						@change="change" type="password">
						<template slot="prefix">
							<view style="width: 80rpx;">
								<u-icon name="lock" color="#8f8f94" size="20"></u-icon>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item labelWidth="80" borderBottom ref="item1">
					<u-input placeholder="请输入验证码" maxlength="6" v-model="info.code" border="none" type="number">
						<template slot="prefix">
							<view style="width: 80rpx;">
								<u-icon name="minus-circle" color="#8f8f94" size="20"></u-icon>
							</view>
						</template>

						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获"></u-code>
							<u-button @tap="getCode" :text="tips" type="primary" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>
				
			</u-form>
		</view>
		<view class="button">
			<!-- <MButton title="确定" :colorType="colorType" @click="save"></MButton> -->
			<u-button type="primary" shape="circle" text="确定" @click="save"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		putPasswordCode,
		putPassword
	} from '@/api/my/index.js';
	import isValidPhoneNumber from "@/utils/vaildatetell.js"
	export default {
		data() {
			return {
				tips: '',
				colorType: '#eee',
				bgColor: '',
				color: '#c4ccd4',

				info: {
					phone: '',
					code: '',
					newPassword: '',
				}
			}
		},
		methods: {
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (!isValidPhoneNumber(this.info.phone)) return this.$refs.uToast.show({
						type: 'error',
						message: "请输入正确手机号"
					})
					const res = await putPasswordCode(this.info.phone)
					
					if (res.data.code != 200) return this.$refs.uToast.show({
						type: 'error',
						message: res.data.msg
					})
					this.$refs.uToast.show({
						type: 'success',
						message: "验证码已发送"
					})
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: "请稍等"
					})
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		
			change(e) {
				if (this.info.newPassword.length > 1) {
					this.colorType = 'topic'
				}
			},
			async save() {
				if (!isValidPhoneNumber(this.info.phone) && this.info.code != "" && this.info.newPassword != "")
					return this.$refs.uToast.show({
						type: 'error',
						message: "请填写完整"
					})
				const res = await putPassword({
					code: this.info.code,
					newPassword: this.info.newPassword
				})
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '修改成功'
					})
					setTimeout(() => {
					
						uni.navigateTo({
							url: '../landlord/login',
							animationType: this.animation.type,
							animationDuration: this.animation.time
						})
					}, 1000)
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: res.data.msg
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.module {
		padding: 60rpx 80rpx;
		box-sizing: border-box;

		// .title {
		// 	font-size: 32rpx;
		// 	color: $theme;
		// }
		.button {
			text-align: center;
			color: #8f8f94;
			font-size: 28rpx;
			margin-top: 40rpx;
		}
	}
</style>